<template>
	<view class="container">
		<u-form :model="form" ref="uForm" :label-style="{fontSize: '35rpx'}">
			<u-form-item label="学员姓名" label-width="150" prop="preUserName">
				<input placeholder-style="#000" placeholder="请输入学员姓名" type="text" v-model="form.preUserName" />
			</u-form-item>
			<u-form-item :label="label" label-width="150" prop="PreUserTelePhone">
				<input v-if="change" placeholder-style="#000" placeholder="请输入身份证号" v-model="form.PreUserTelePhone" type="idcard" maxlength="20"/>
				<input v-else placeholder-style="#000" placeholder="请输入其他证件号码" v-model="form.PreUserTelePhone" type="text" maxlength="50"/>
				<view class="change-btn" slot="right" @tap="handleChange">{{btnLabel}}</view>
			</u-form-item>
			<u-form-item class="form-item" label-width="0">
				<u-button type="error" @click="confirm">登录</u-button>
			</u-form-item>
		</u-form>
		<view class="msgInfo" v-if="msgInfo">
			<text class="title">温馨提示</text>
			<text class="content">{{ msgInfo }}</text>
		</view>
		<view v-if="btnText" class="footer">
			<u-button class="u-button" type="error" @click="goItem">{{btnText}}</u-button>
		</view>
		<u-keyboard 
			v-if="change" 
			ref="uKeyboard" 
			tips="请保护好您的个人信息" 
			:cancel-btn="false" 
			:confirm-btn="true" 
			mode="card" 
			v-model="showKeyboard" 
			@change="handlekeyboardChange" 
			@backspace="handlekeyboardBack">
		</u-keyboard>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			msgInfo: '',
			form:{
				preUserName: '',
				PreUserTelePhone: ''
			},
			rules: {
				preUserName: [
					{ 
						required: true, 
						message: '请输入学员姓名', 
						trigger: ['blur'],
					}
				],
				PreUserTelePhone: [
					{
						required: true, 
						message: '请输入证件号码', 
						trigger: ['change']
					}
				]
			},
			change: true,
			showKeyboard: false,
			btnText: '',
			targetUrl: ''
		};
	},
	computed:{
		label(){
			return this.change?'身份证':'其他证件';
		},
		btnLabel(){
			return this.change?'其他证件号':'身份证号';
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad() {
		this.$http.request({
			url:'api/UcenterApi/CheckVip'
		}).then(res=>{
			if(res.pageTitle){
				uni.setNavigationBarTitle({
					title: res.pageTitle
				})
			}
			if(res.msgInfo){
				this.msgInfo = res.msgInfo;
			}
			if(res.btnText){
				this.btnText = res.btnText;
				this.targetUrl = res.targetUrl;
			}
			// #ifdef H5
			this.$wechat.share({
				link: this.$handlerAppMessagePath()
			});
			// #endif
			
		})  
	},
	onShareAppMessage(e) {
		return {
			path: this.$handlerAppMessagePath()
		};
	},
	methods: {
		...mapMutations('user', ['logout']),
		handleChange(){
			this.form.PreUserTelePhone = '';
			this.change = !this.change;
		},
		// 非会员点击下方按钮跳转
		goItem(){
			let targetUrl = encodeURIComponent(`${this.targetUrl}${this.form.PreUserTelePhone || ''}`);
			uni.navigateTo({
				url: `../web_view/web_view?target=${targetUrl}`
			});
		},
		handlekeyboardChange(e){
			// 身份证最大18位
			if(this.change){
				if(this.form.PreUserTelePhone.length == 18){
					return
				}
			}
			this.form.PreUserTelePhone = `${this.form.PreUserTelePhone}${e}`;
		},
		handlekeyboardBack(){
			if(this.form.PreUserTelePhone.length == 0){
				return
			}
			this.form.PreUserTelePhone = this.form.PreUserTelePhone.substring(0, this.form.PreUserTelePhone.length - 1);
		},
		confirm(e) {
			console.log('in!')
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$http.request({
						url: 'api/ChannelApi/ExChangeChannelPreUser',
						method: 'POST',
						showToast: false,
						data: this.form
					})
					.then(res => {
						this.logout();
						this.msgInfo = res.msInfo;
						uni.showModal({
							title: '温馨提示',
							content: res.msInfo,
							showCancel:false,
							success() {
								uni.switchTab({
									url: '../index/index'
								});
							}
						});
					})
					.catch(err => {
						console.log(err);
						this.msgInfo = err.error.message;
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container{
	padding: 50rpx;
	box-sizing: border-box;
	input{
		color: #000;
		font-size: 35rpx;
	}
	.change-btn{
		font-size: 25rpx;
		color: #fff;
		background-color: #fa3534;
		border-radius: 10rpx;
		transition: background-color .3s;
		width: 150rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.change-btn:active{
		background-color: #dd6161;
	}
	.footer{
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50rpx 0;
		font-size: 30rpx;
		.u-button{
			width: 96%;
		}
	}
}
.msgInfo {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #000;
	margin-top: 50rpx;
	.title {
		font-size: 50rpx;
	}
	.content {
		word-break: break-all;
		font-size: 40rpx;
	}
}
</style>
